<template>
	<view class="payment page">
		<view class="con" style="background-color: #F0C808;">
			<view class="top" >
				<view class="total">
					<text class="name">总收款</text>
					<text class="amount">¥{{total.all}}</text>
				</view>
				<view class="info">
					<view class="left border-right-1px">
						<text class="amount">¥{{total.done}}</text>
						<text class="name">已收款</text>
					</view>
					<view class="right">
						<text class="amount">¥{{total.all-total.done}}</text>
						<text class="name">未收款</text>
					</view>
				</view>
			</view>

			<view class="items">
				<view class="item border-bottom-1px" :key="index" :class="{done:record.status==1}"
					 v-for="(record,index) in recordList">
					<view class="icon-con">
						<text class="iconfont iconmoney"></text>
					</view>
					<view class="info" @click="turn(record.info,record.id)">
						<text class="amount">+{{record.amount}}</text>
						<text class="time">{{parseTime(record.time)}}</text>
					</view>
					<view class="btn" @click="confirm(index)">{{record.status==0?'确认收款':'已收款'}}</view>
				</view>

			</view>

		</view>
	</view>
</template>

<script>
	import {paymenet} from "@/api/account";
	import {parseTime} from "../../common/js/time";
	import {confirm} from "../../api/account";
	export default {
		onLoad() {
			paymenet().then(res => {
				this.records = res.data
			})
		},
		data() {
			return {
				records: []
				// recordList:[]
			}
		},
		methods: {
			turn(orderNo,id){
				console.log(orderNo)
				uni.navigateTo({
					url:`/pages/order/detail?orderNo=${orderNo}`
				})
			},
			showAlert() {
				uni.showToast({
					title:'收款成功'
				})
			},
			confirm(index) {
				console.log(index)
				let record = this.recordList[index]
				if(  record.status ==1){
					return
				}
				confirm(record.id).then(res=>{
					this.showAlert()
					this.$set(this.recordList[index],'status',1)
					// this.records[index].status = 1
					console.log(this.records)
					// this.recordList.splice(index,1,res.data)
				})
			},
			parseTime(time) {
				return parseTime(time)
			}
		},
		computed: {
			recordList() {

				return this.records.map(record => {
					// console.log(record.record)
					return record.record
				})
				// console.log(this.recordList)
			},
			total(){
				let done = 0
				let all = 0
				this.recordList.forEach(record=>{
					// console.log(record)
					if(record.status==1){
						done+=record.amount
					}
					all+=record.amount
				})
				let tem  = {done,all}
				console.log(tem)
				return tem
			}
		}
	}
</script>

<style scoped lang="stylus">
    .payment
        // background url("./earth.png") no-repeat $page-bg
        background-size 100% 100%
        z-index 2
        height 100%

        .con
            padding 0px 20rpx 20rpx

            .top
                overflow hidden

                .total
                    display flex
                    flex-direction column
                    align-items center
                    justify-content flex-start
                    margin-top 38rpx
                    margin-bottom 10rpx

                    .name
                        font-size: 24rpx;
                        font-family: PingFang SC;
                        font-weight: 300;
                        color:rgba(255,255,255,1);

                    .amount
                        margin 30rpx 0
                        font-size: 60rpx;
                        font-family: PingFang SC;
                        font-weight: 400;
                        color: rgba(255, 255, 255, 1);

                .info
                    display flex
                    height 170rpx
                    align-items center
                    border-radius 10rpx
                    background:rgba(255,255,255,0.26);

                    .left
                        border-right 1px solid #A1A1A1

                    .left, .right
                        flex-direction column
                        height 90rpx
                        flex 1
                        display flex
                        align-items center
                        justify-content center

                        .amount
                            font-size: 48rpx;
                            font-family: PingFang SC;
                            font-weight: 300;
                            color:#FFFFFF

                        .name
                            margin-top 16rpx
                            font-size: 24rpx;
                            font-family: PingFang SC;
                            font-weight: 300;
                            color:rgba(255,255,255,1);

            .items
                margin-top 20rpx

                .item
                    margin-top 10rpx
                    border-radius 10rpx
                    border-bottom-color #DCDCDC
                    display flex
                    align-items center
                    height 148rpx
                    background:rgba(255,255,255,1);
                    .icon-con
                        .iconfont
                            font-size 90rpx
                            flex 0 0 90rpx
                            margin 0 28rpx
                            color #F0C808

                    .info
                        height 100%
                        display flex
                        flex 1
                        justify-content center
                        flex-direction column

                        .amount
                            font-size: 32rpx;
                            font-family: PingFang SC;
                            font-weight: 300;
                            color: rgba(247, 137, 94, 1);

                        .time
                            margin-top 14rpx
                            font-size: 20rpx;
                            font-family: PingFang SC;
                            font-weight: 300;
                            color: rgba(161, 161, 161, 1);

                    .btn
                        font-size: 24rpx;
                        width 130rpx
                        height 56rpx
                        background-color #F7895E
                        color white
                        display flex
                        align-items center
                        justify-content center
                        flex 0 0 130rpx
                        border-radius 28rpx
                        margin-right 20rpx

                    &.done
                        /*background-color #EDECEC*/

                        .btn
                            background-color #F5F4F1
                            color #6F6F6F

                        .amount
                            color #6F6F6F
</style>